<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
            border-bottom: solid 2px #DDD;
            /* 合并边框 */
            border-collapse: collapse;
        }
        td,th {
            border-bottom: solid 1px #DDD;
            height: 40px;
        }
    </style>
</head>
<body>
    <!-- 架子 -->
    <table>
        <thead>
           <tr>
            <th>userId</th>
            <th>userName</th>
            <th>userSex</th>
            <th>userAge</th>
           </tr>
        </thead>
        <tbody id="tbody">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

        </tbody>
    </table>
</body>

</html>
 <script>
    const tbody =  document.getElementById("tbody");
    tbody.innerHTML ="";
	const userArr = [{
				userId: 1,
				userName: '张三',
				userSex: '男',
				userAge: 20
			}, {
				userId: 2,
				userName: '李四',
				userSex: '女',
				userAge: 21
			}, {
				userId: 3,
				userName: '王五',
				userSex: '男',
				userAge: 22
			}]
            // 获得数据
    // 遍历数组
    userArr.forEach( user=>{
// data ---  > tr 
        let tr = `
            <tr>
                <td>${user.userId}</td>
                <td>${user.userName}</td>
                <td>${user.userAge}</td>
                <td>${user.userSex}</td>
            </tr>
        `;
         // tr -- > table 
         tbody.innerHTML += tr;
    } ) 

 </script>
 

 